<template>
    <div class="order">
        <div class="orderTop">

            <h1>选择您的地址</h1>
        <div class="orderHead">

            <el-steps :active="0" align-center >
            <el-step title="拍下商品" description=""></el-step>
            <el-step title="付款" description=""></el-step>
            <el-step title="确认收货" description=""></el-step>
            <el-step title="评价" description=""></el-step>
        </el-steps>
        
        </div>
        </div>
        
      
        <div class="address-list">
            <!--
              渲染的是每个地址的信息，但有可能没有地址
             -->
            <div class="item-list" v-for="(item, index) in addresslist" :key="item.id"
                :class="{active:isActive == index}" @click="isActive = index">
                <div class="listAll" @click="getId(item)">
                    <div>{{ item.name }}</div>
                <div>{{ item.phone }}</div>
                <div>{{ item.area_name }}</div>
                <div>{{ item.desc }}</div>
                <div>{{ item.post_code }}</div>
                <div>
                    <!-- item是地址对象信息 -->
                    <div @click="del(item)" class="del-btn">Del</div>
                    <div @click="edit(item)" class="edit-btn">Edit</div>
                </div>
                </div>
                
            </div>

            <!-- 永远存在，用来给用户做添加的操作 -->
            <div class="item-list addlist" @click="add">
                <div class="add">
                    <span class="iconfont icon-add">+</span>
                </div>
            </div>


        </div>
        <el-dialog :visible="addOrEdit" @close="close">
            <!-- 我是添加/编辑的对话框 -->
            <div>
                姓名
                <input type="text" v-model.lazy="useIpt.name" />
            </div>
            <div>
                电话
                <input type="text" v-model.lazy="useIpt.phone" />
            </div>
            <div>
                地址id集合
                <!--级联选择器  <input type="text" v-model="useIpt.area" /> -->
                <el-cascader ref="citynode" v-model="useIpt.area" :options="cities" @change="handleChange">
                </el-cascader>
            </div>
            <div>
                详细地址
                <input type="text" v-model="useIpt.desc" />
            </div>
            <div>
                邮编
                <input type="text" v-model="useIpt.post_code" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitAddress">确 认</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible="dialogDel" @close="close">
            <!-- 我是删除的对话框 -->
            确认删除吗？
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitAddress">确 认</el-button>
            </div>
        </el-dialog>

        <el-button @click="submitOrder" class="goOrderList"> 去订单列表页查看 </el-button>    
        <router-view></router-view>
    </div>
</template>
  
<script>
//引入和地址相关的请求函数
import {
    getCity,
    addAddress,
    getAddress,
    editAddress,
    delAddress,
    addOrder,
    getOrder,
    delOrder,
} from "@/assets/request.js";
export default {
    name: "Order",
    data() {
        return {
            isActive: 0,
            //当前操作的地址的id
            optionId: 0,

            //需要知道用户是想编辑/新增 用一个变量定义用户的行为
            //比较关键的一点,用一个值去作为条件去判断用户想要进行什么操作,
            //0,那么就是添加, 1,编辑  2,删除
            useraction: null, //0 添加   1 编辑   2删除
            //添加/编辑的对话框
            addOrEdit: false,
            //删除的对话框
            dialogDel: false,
            //地址列表数组
            addresslist: [],
            //城市id数据
            cities: [],
            //因为这个area_name显示的时候要显示名称，但是实际发请求的时候要获取的是2,502,22这种id 单独拿出来处理
            area_name: "",
            //用一个大对象存放用户填写的信息
            useIpt: {
                name: "",
                phone: "",
                area: "",
                desc: "",
                post_code: "",
            },
            //存放 订单数据 选中的该项所有数据
            itemSelect:"",
        };
    },
    methods: {
        //获取地址列表信息，并且赋值给addresslist 
        //写一个方法updateList,页面只要有修改地址的地方,就需要更新地址,为了方便,随时调用即可,不需要
        //写太多的await getAddress(),
        async updateList() {
            let resAddress = await getAddress();
            //console.log(resAddress);
            this.addresslist = resAddress.data.result;
        },
        //携带需要的信息并跳去订单列表页
        async submitOrder() {
            //后台要的是addr_id
            let item = this.addresslist[this.isActive];
            //item.id
            if (!item) {
                //没有地址信息
                this.$message.error("请选择一个地址");
                return;
            }
            console.log(item, "选中地址了，去订单列表页");
            //我们应该先await一个生成订单的函数 再做路由跳转
        },

        //地址的操作
        async submitAddress() {
            //不管你是修改还是新增 都要走这个
            //需要区分你发的是那种请求
            if (this.useraction === 0) {
                console.log("说明值为0 ,需求是添加");
                //准备好对应的参数
                let { name, phone, area, desc, post_code } = this.useIpt;
                await addAddress({
                    name,
                    phone,
                    area: area.toString(),
                    desc,
                    post_code,
                    area_name: this.area_name,
                });
                this.updateList();
            } else if (this.useraction === 1) {
                // this.handleChange()
                //console.log(this.addresslist);
                let { name, phone, area, desc, post_code } = this.useIpt;
                await editAddress(this.optionId, {
                    name,
                    phone,
                    area: area.toString(),
                    desc,
                    post_code,
                    area_name: this.area_name,
                });
                this.updateList();
            } else {
                console.log("删除");
                let del_id = this.addresslist[this.isActive].id;
                await delAddress(del_id);
                this.updateList();
            }
            //不管你发什么请求过去，发完以后都要关闭弹窗
            this.close();
        },
        //添加
        add(item) {
            this.addOrEdit = true, 
            this.useraction = 0;
            
        },
        //获取选中的那一项
        getId(item){
            this.itemSelect = item
            sessionStorage.setItem("itemSelect",JSON.stringify(this.itemSelect))
            //console.log(this.itemSelect.desc);
        },
        //修改
        edit(item) {
            this.optionId = item.id, 
            this.addOrEdit = true, 
            this.useraction = 1;
            
            ;

            //item中的area是一个字符串，但是你需要他是一个数组才能v-model显示出来
            //3,2,1-->[3,2,1]
            //判断item.area是否是一个数组
            if (item.area instanceof Array) {
                //什么都不用做
            } else {
                //需要处理
                item.area = item.area.split(",").map((ele) => Number(ele));
            }
            this.useIpt = item;
        },
        //删除
        del() {
            (this.dialogDel = true), (this.useraction = 2);
        },
        //关闭所有的对话框，并且清除用户的输入
        close() {
            (this.dialogDel = false),
                (this.addOrEdit = false),
                (this.useIpt = {
                    name: "",
                    phone: "",
                    area: "",
                    desc: "",
                    post_code: "",
                });
        },
        handleChange(value) {
            //value 拿到的是id数组
            //我们要展示的是地区的名称
            //getCheckedNodes获取组件中的选中的节点信息
            // console.log(this.$refs.citynode.getCheckedNodes());
            //不管是几级的选择 要一直拿到最后一级
            this.area_name = this.$refs.citynode
                .getCheckedNodes()[0]
                .pathLabels.join("");
        },
        submitOrder(){
            this.$router.push("order/orderlist")
        }
    },
    async mounted() {
        //获取所有城市
        let resCity = await getCity();
        this.cities = resCity.data.result;
        //获取地址列表信息
        this.updateList();
        //添加订单
        // let resOrder = await addOrder({
        //     //地址id
        //     addr_id:this.address_id,
        //     goods_info:[{
        //         id:"",
        //         num:"",
        //     }],
        //     project_id:"",
        //     shoppingCartIds:"",
        // });
        // console.log(resOrder);
    },
};
</script>
  
<style lang="scss" scoped>
.order {
    overflow: hidden;
    min-width: 1226px;
   
    margin-top: 150px;
   // background-color: green;
   .orderTop{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    //background-color: green;
    .orderHead{
    width: 900px;
    height: 50px;
    overflow: hidden;
    
    
    margin: 0 auto;
   }
   }
  
    .address-list {
        width: 1226px;
        min-height: 300px;
        margin: 0 auto;
        margin-top: 20px;
         background-color: rgb(253, 251, 251);
         box-shadow: 1px 1px 6px 1px #adadad;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
       
       .item-list {
            overflow: hidden;
            margin: 60px 12px;
            width: 23%;
            height: 100%;
            background-color: #e3e3e3;
            position: relative;
            border-radius: 0.7rem;
            box-shadow: 0 0.9rem 1.7rem rgb(0 0 0 / 25%),
                0 0.7rem 0.7rem rgb(0 0 0 / 22%);

            &.active {
                background-color: rgba($color:#e1251b , $alpha: 0.8);
                color: white;
            }
            >.listAll{
                div {
                
                font-size: 20px;
                width: 100%;
                height: 20px;
                display: flex;
                margin-bottom: 26px;
                margin-top: 10px;
                justify-content: space-around;

                .del-btn,
                .edit-btn {
                    cursor: pointer;
                    width: 100px;
                    height: 28px;
                    line-height: 30px;
                    border-radius: 0.7rem;
                    color: white;
                    font-size: 20px;

                    &:active {
                        transform: scale(0.8);
                        transition: ease-in-out 0.3s;
                    }
                }

                .del-btn {
                    color: red;
                    background-color: #f39c12;
                    box-shadow: 0 4px #d35400;
                }

                .edit-btn {
                    background-color: #008184;
                    box-shadow: 0 4px #005c5f;
                }
            }

            .add {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 50px;
                height: 50px;
                line-height: 50px;

                .icon-add {
                    font-size: 50px;
                    color: black;
                }
            }
    }
            
        }

        .addlist {
            width: 281.97px;
            height: 210px;
            cursor: pointer;
            .icon-add{
                margin-top: 30px;
                font-size: 100px;
                opacity: .1;
            }
        }
    }
    .goOrderList{
        margin-top: 50px;
    }
}
</style>
  